<template>
  <div class="guessLike">
         
      <div class="headline" v-if="!showTitle"><span>猜你喜欢</span></div>
      <div class="reveal">
          <div class="revealItem" v-for="item in inpRes" :key="item.id"  @click="toGoodsDetail(item.id)">
              <img :src="item.list_pic_url" alt="">
              <div class="title">{{item.name}}</div>
              <div class="price">{{item.retail_price | trimCash}}</div>
          </div>
      </div>      
  </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    props:['inpRes','showTitle'],
    methods:{
     // 带ID转跳详情页面
        toGoodsDetail(id){
            if(this.$route.path == '/detail'){
                 this.$router.push({ path: '/detail', query: { goodsId: id } })
                 location.reload()
            }else{
                  this.$router.push({ path: '/detail', query: { goodsId: id } })
            }
            // this.$router.push({ path: '/detail', query: { goodsId: id } })
            
            window.scrollTo(0, 0)
            // this.$emit('acceptGoodsId',id)
        }        
    }

}
</script>

<style lang="less" scoped>
.guessLike{
    overflow: scroll;
    height: 93vh;
    margin-bottom: 100px;
    width: 100%;
    background-color: #fff;
     .headline{
        height: 80px;
        width: 100%;
        line-height: 80px;
        position: relative;

        span{
            position: absolute;
            background-color: #fff;
            width: 150px;
            text-align: center;
            display: block;
            left: 40%;
        }
        &::before{
            content: "";
            width: 50%;
            height: 5px;
            background-color: rgb(194, 194, 194);
            position: absolute;
            top: 45%;
            right: 25%;
        }
    }

    .reveal{
        border-top: 1px solid var(--bg);
        width: 100%;
        display: flex;
        justify-content: space-between;  
        flex-wrap: wrap;      
        .revealItem{
            border-right: 1px solid var(--bg);
            border-bottom: 4px solid var(--bg);
            width: 49.7%;
            background-color: #fff;

            div{
                padding: 10px 0;
                text-align: center;
            }
            img{
                width: 100%;
            }
            .title{
                font-weight: 800;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

            }
            .price{
                color: var(--imp);
                font-weight: 800;

            }
        }
    }
  

}

</style>